<template>
	<view class="map-container">
		<!-- 原生-地图组件 -->
		<map id="myMap" :longitude="longitude" :latitude="latitude" class="map"></map>

		<!-- 覆盖层 - 右上角的定位按钮 -->
		<cover-view class="location-button" @click="centerOnMyLocation">
			<cover-image src="/static/location-icon.png" class="location-icon"></cover-image>
		</cover-view>

		<!-- 覆盖层 - 底部的兴趣点面板 -->
		<cover-view class="poi-panel">
			<!-- 面板内的可滚动列表 -->
			<cover-view class="poi-list" :scroll-top="poiScrollTop">
				<cover-view v-for="(poi, index) in poiList" :key="poi.id" class="poi-item" @click="focusOnPoi(poi)">
					<cover-view>{{ index + 1 }}. {{ poi.name }}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

		<button @click="resetPoiListScroll">重置列表</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			longitude: 116.39742,
			latitude: 39.909,
			poiScrollTop: 0,
			poiList: [
				/* ... 包含经纬度的兴趣点数据 ... */
			]
		};
	},
	methods: {
		centerOnMyLocation() {
			console.log('定位到我的位置...');
			uni.getLocation({
				success(res) {
					// longitude.value = res.longitude;
					// latitude.value = res.latitude;

					// console.log('当前位置经度：', longitude.value);
					// console.log('当前位置纬度：', latitude.value);
					console.log(res);
				}
			});
		},
		focusOnPoi(poi) {
			console.log(`聚焦到: ${poi.name}`);
			// 改变地图中心点
			this.longitude = poi.longitude;
			this.latitude = poi.latitude;
		},
		resetPoiListScroll() {
			console.log('重置POI列表滚动位置');
			this.poiScrollTop = Math.random(); // 同样，用随机数或新旧值判断来确保滚动被触发
		}
	}
};
</script>

<style>
.map-container,
.map {
	width: 100vw;
	height: 100vh;
}
.location-button {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 10;
}
.location-icon {
	width: 24px;
	height: 24px;
}
.poi-panel {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	z-index: 10;
}
.poi-list {
	background-color: white;
	border-radius: 8px;
	padding: 5px;
	height: 150px; /* 必须有固定高度 */
	overflow-y: scroll; /* 设置为可垂直滚动以配合 scroll-top */
}
.poi-item {
	padding: 12px;
	border-bottom: 1px solid #eee;
	color: #333;
}
</style>
